<template>
	<view>
		<cu-custom class="text-Black" bgColor="bg-red" :isBack="true">		<block slot="backText"></block>
			<block slot="content">{{detail?detail.title:''}}</block>
		</cu-custom>
		<view class="padding">
			<view class="bg-white padding-sm" v-if="detail">
				<view class="text-center margin text-bold text-lg">{{detail.title}}</view>
				<!-- <image :src="detail.cover" mode="widthFix" class="w100" v-if="detail.cover"></image> -->
				<view class="margin-top content">
					<rich-text :nodes="detail.content"></rich-text>
				</view>
				<view class=" text-right margin-top">{{detail.author}}</view>
				<view class="text-gray text-right margin-top">
					<text>{{detail.created_at}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Foot from '@/components/default/foot.vue'
	export default {
		components: {
			Foot,
		},
		data() {
			return {
				detail: null
			}
		},
		onLoad(options) {
			this.id = options.id
			if (!this.id) {
				this.$common.showErrorModal('参数有误')
			}
			this.$nextTick((res) => {
				uni.startPullDownRefresh({})
			})
		},
		methods: {
			getDetail() {
				this.$http
					.get('article', {
						id: this.id
					})
					.then((response) => {
						let detail = response.data.data
						detail.content = this.$common.mathRichText(detail.content)
						detail.created_at = this.$common.timeFormat(detail.created_at)
						this.detail = detail
						uni.stopPullDownRefresh()
					})
					.catch((response) => {
						console.log(response)
						uni.stopPullDownRefresh()
						this.$common.showErrorModal('信息有误')
					})
			}
		},
		onPullDownRefresh() {
			this.getDetail()
		},
	}
</script>

<style>
	.content {
		overflow: hidden;
	}

	.content image {
		max-width: 100%;
	}
</style>
